<template>
<div>
<navigator-menu></navigator-menu>
<el-card shadow="always" style="border-radius: 10px 15px; height: 80vh; margin: 5vw;opacity: 0.98">
    <div>
        浏览记录
    </div>
    <br>
    <div class="common_width dm_myCollection">
        <el-table
            :data="tableData"
            max-height="600"
            border
            style="width: 100%"
            @select="rowSelection"
            @select-all='rowAll'
            row-key='id'
            size='small'
        >
            <!-- <el-table-column
                type="selection"
                width="60"
                align='center'
            ></el-table-column> -->
            <el-table-column align='center' prop="title" label="论文"/>
            <el-table-column align='center' prop="year" label="浏览时间" width="200"/>
            <el-table-column align='center' prop="authors" label="作者" width="450"/>
            <el-table-column
                prop="operation"
                label="操作"
                width="170"
                align='center'
            >            
                    <template #default="scope">
                    <div style="display:flex;align-items:center;justify-content:center">
                      <div class="Op" @click="toPaperDetail(scope.row,paperId)" style="margin-right:25px;">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="查看文献"
                                  placement="bottom"
                            >
                            <i class="fas fa-search-plus"></i>
                            </el-tooltip>                           
                      </div>
                      <el-popconfirm title="确定要删除吗？" @confirm="deletePaper(scope.row.paperId)">
                        <template #reference>
                            
                          <div class="Op">
                            <el-tooltip
                                  class="item"
                                  effect="dark"
                                  content="删除记录"
                                  placement="bottom"
                            >
                            <i class="far fa-trash-alt"></i>
                            </el-tooltip>                            
                          </div>
                        </template>
                      </el-popconfirm>
                    </div>
                  </template>
            </el-table-column>
        </el-table>
        <el-row class="dm_myCollection__btn">
            <el-col :span='12' class='left'>
                <!-- <el-button plain size='small' @click="batchClick('del')">批量删除</el-button> -->
                <!-- <el-button plain size='small' @click="batchClick('col')">批量加入收藏</el-button> -->
            </el-col>
            <el-col :span='12' class='right'>
            </el-col>
        </el-row>
    </div>
</el-card>
</div>
</template>

<script>
import axios from 'axios';
import NavigatorMenu from "../components/NavigatorMenu";
export default {
    components: {
    NavigatorMenu
    },
    data() {
        return {
            id:1,
            columns: [
                // { id: 1, prop: 'mainPicture', label: '图片', width: 86 },
                { id: 2, prop: 'title', label: '论文' },
                { id: 3, prop: 'year', label: '浏览时间', width: 250 },
                { id: 4, prop: 'authors', label: '作者', width: 80 },
                // { id: 5, prop: 'totalprice', label: '作者', width: 136 }
            ],
            tableData: [
                //  {
                //     date: '2016-05-03',
                //     description: '人工代理的道德责任何以可能?——基于“道德问责”和“虚拟责任”的反思',
                //     time: '2021.12.8',
                //     writer: '王亮',
                // },
                // {
                //     date: '2021.12.013',
                //     description: '急性冠脉综合征风险预测模型的方法学探讨',
                //     time: '2021.12.13',
                //     writer: '连扬鹏',
                // },
                // {
                //     date: '2016-05-03',
                //     description: '肝癌影像组学临床应用研究进展',
                //     time: '2021.12.1',
                //     writer: '李文华1,2 李天然2 刘海丽2',
                // },
            ],
        }
    },
    created() {
        this.id=sessionStorage.getItem('id');
        console.log(this.id);
       axios.get('/api/viewHistory',{params:{userId:this.id}})
       .then(response => {
                console.log('response is here!')
                console.log(response.data)
                    response.data.data.forEach((item,index)=>{
                    let collect={};
                    collect.title=item.paper.title;
                    collect.paperId=item.paper.id;
                    collect.year=item.viewHistory.time;
                    let authors="";
                    if(item.paper.authors){
                    item.paper.authors.forEach((author,index)=>{
                    authors=authors+author.name+',';
                    })
                    }
                    collect.authors=authors.substr(0,authors.length-1);
                    this.tableData.push(collect);
                    
            })
                
       })
    },
    methods: {
        toPaperDetail:function(paperId){
        sessionStorage.setItem('paperId',paperId);
        this.$router.push({path:'/PaperDetail',query:{paperId:paperId}});
        },
        deletePaper:function(paperId){
            axios.delete('/api/viewHistory',{data:{userId:this.id,paperId:paperId}})
                .then(response=>{
                    console.log(response);
                    if(response.data.code==200){
                    this.$message({message:"删除成功",type:'success'});
                    this.tableData.forEach((item,index,arr)=>{
                    if(item.paperId===paperId){
                    arr.splice(index,1);
                    }
                }) 
                    }else{
                    this.$message({message:response.data.msg,type:'error'});
                    }
                })
                .catch(error=>{
                    console.log(error);
                })   
                },
        batchClick(_this) {
            let selection = this.selection;
            let ids = selection.map(item => item.id);
            let obj = {
                del: () => {
                    if( !selection.length ) {
                        this.$message({
                            message: '请选择需要删除的记录！',
                            type: 'warning'
                        });
                    }else{
                        this.deleteCartClick(ids);
                    }
                },
                col: () => {
                    if( !selection.length ) {
                        this.$message({
                            message: '请选择需要加入收藏的文章！',
                            type: 'warning'
                        });
                    }else{
                        this.addCollectionClick(ids);
                    }
                }
            };
            obj[_this]();
        },
        // 删除 - 操作
        deleteCartClick(id) {
            this.$confirm('此记录确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                axios.delete('/api/viewHistory',{params:{
                    paperId: "string",
                    userId: this.id
                    }})
                .then(response => {
                    console.log('response is here!')
                    if (response.code == 200) {
                        this.$message({
                        message: '已删除'
                        })
                    } else {
                        console.log(response.msg)
                        this.$message({
                        message: '抱歉，无法删除',
                        type: 'warning'
                        })
                    }
                })
                }).catch(() => {
                return;
            })
        },
        // 删除
        
    },
     // 全选
        rowAll(selection) {
            this.selection = selection;
        },
        // 选中行
        rowSelection(selection, row) {
            this.selection = selection;
            this.row = row;
        }
   
}
</script>

<style lang="less">
    .dm_myCollection {
    height: 100%;
    background: #fff;
    margin-bottom: 30px !important;
    border: solid 1px #e6e6e6;
    padding: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    .operation {
        >span {
            cursor: pointer;
            padding: 0 4px;
            &:hover {
                color: #40A9FF;
            }
        }
    }
    .imgs_style {
        width: 100%;
    }
    .title_style {
        text-align: left;
        >span {
            display: block;
            &:first-child {
                overflow: hidden;
            }
            &:last-child {
                color: #999;
            }
        }
        &:hover {
            >span {
                &:first-child {
                    color:#999;
                }
            }
        }
    }
    &__btn {
        width: 100%;
        height: 55px;
        display: flex;
        align-items: center;
        .left {
            button {
                margin: 0 16px;
            }
        }
        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100%;
            .num {
                display: flex;
                padding-right: 20px;
                i {
                    color: #40A9FF;
                    font-weight: bold;
                    padding: 0 3px;
                    font-style: normal;
                    font-size: 14px;
                }
            }
            >div {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-weight: bold;
                padding-right: 20px;
                span {
                    color: #40A9FF;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .go-pay {
                width: 94px;
                height: 100%;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                background: #40A9FF;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
